<template>
	<view class="container">
		<image :src="url+ddimg" mode="" class="ddimg"></image>
		<view class="box">
			<view class="tabs">
			      <view v-for="(tab,index) in tabs" @click="toggle(index)" :class="{active:activeTabIndex===index}" :key="(tab,index)">
			        {{ tab }}
			      </view>
			    </view>
			    <view v-if="activeTabIndex === 0">
			      <!-- 第一个tab的内容 -->
			      <ul v-if="listData.length>0">
					  <li class="tabItem" v-for="(item,index) in listData" v-if="item.type==1&&item.status==1||item.type==2&&item.status==0">
						  <!-- <image src="../../static/img/gb.png"></image>
						   -->
						  <view class="OrderInfo">
							  <view class="orderName">
								  {{item.payment_body}}
							  </view>
							  <view class="orderTime">
								  {{item.createtime | formatDate}}
							  </view>
						  </view>
						  <view class="orderPrice">
							  <view class="paymenPrice">￥{{item.payment_price}}</view>
							  <view class="exitBtn" v-if="item.type==1&&item.status==1">已支付</view>
							  <view class="tkBtn" v-if="item.type==2&&item.status==0">已退款</view>
						  </view>
					  </li>
				  </ul>
				  <view v-if="listData.length==0">
					  <nullVue></nullVue>
				  </view>
			    </view>
			    <view v-if="activeTabIndex === 1">
			      <!-- 第二个tab的内容 -->
			      <ul v-if="listData.length>0">
					  <li class="tabItem" v-for="(item,index) in listData" v-if="item.type==1&&item.status==1||item.type==2&&item.status==0">
						  <!-- <image src="../../static/img/gb.png"></image> -->
						  <view class="OrderInfo">
							  <view class="orderName">
								  {{item.payment_body}}
							  </view>
							  <view class="orderTime">
								  {{item.createtime | formatDate}}
							  </view>
						  </view>
						  <view class="orderPrice">
							  <!-- ￥{{item.payment_price}} -->
							  <view class="orderPrice shopBox">
								  <view class="paymenPrice">￥{{item.payment_price}}</view>
								  <view class="tk" @click="exitBtn(item)" v-if="item.type==1&&item.switch==0">退款</view>
								  <view class="exitBtn" v-if="item.type==1&&item.switch==1">已发货</view>
								  <view class="tkBtn" v-if="item.type==2">已退款</view>
							  </view>
						  </view>
					  </li>
				  </ul>
				  <view v-if="listData.length==0">
					<nullVue></nullVue>
				  </view>
			    </view>
				<view v-if="activeTabIndex === 2">
				  <!-- 第二个tab的内容 -->
				  <ul v-if="listData.length>0">
					  <li class="tabItem" v-for="(item,index) in listData" v-if="item.type==1&&item.status==1||item.type==2&&item.status==0">
						  <!-- <image src="../../static/img/gb.png"></image> -->
						  <view class="OrderInfo">
							  <view class="orderName">
								  {{item.payment_body}}
							  </view>
							  <view class="orderTime">
								  {{item.createtime | formatDate}}
							  </view>
						  </view>
						  <view class="orderPrice">
							  ￥{{item.payment_price}}
						  </view>
					  </li>
				  </ul>
				  <view v-if="listData.length==0">
					  <nullVue></nullVue>
				  </view>
				</view>
		</view>
	</view>
</template>

<script>
import nullVue from '@/components/null';
	import { userInfo,getDealList} from '@/api/api.js'
	import { getBuyShopJl,getScrRefund,getScRrefundJl} from '@/api/shop.js'
	import config from '@/config'
	export default {
		components:{
			nullVue
			// import nullVue from '@/components/butlogin';
		},
		data() {
			return {
				url:config.baseUrl,
				tabs: ['徒步', '商城', '会员'],
				activeTabIndex: 0, // 当前激活的tab索引
				openid:"",
				infoData:{},
				listData:[],
				ddimg:"/uploads/web/ddimg.png"
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 查询用户信息
			getUserInfo(){
				let that = this
				// 获取缓存
				uni.getStorage({
				    key: 'data1',
				    success: function (res) {
						that.openid = res.data.openid
						// 查询用户信息表中是否有该手机号
						userInfo(res.data.phone).then((userRes) => {
							that.infoData = userRes.info
							that.getDealList()
						  })
				    }
				});
			},
			
			// 获取交易列表
			getDealList(){
				let data = {
					phone:this.infoData.phone,
					payment_type:this.activeTabIndex+1
				}
				getDealList(data).then((res) => {
					this.listData = res.data
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].payment_price = this.listData[i].payment_price.replace(/\.00$/, '');
					}
				  })
			},
			
			// 获取商城交易记录
			getShopList(){
				this.listData = []
				let data = {
					phone:this.infoData.phone,
					payment_type:2,
				}
				getBuyShopJl(data).then((res) => {
					this.listData = res.info
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].payment_price = this.listData[i].payment_price.replace(/\.00$/, '');
					}
				  })
			},
			
			toggle(index){
				this.activeTabIndex = index
				if(this.activeTabIndex==1){
					this.getShopList()
				}else{
					this.getDealList()
				}
			},
			// 退出报名
			exitBtn(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退款吗？',
					success: function (res) {
						if (res.confirm) {
							let data = {
								hdId:item.id,
								// hdName:item.hdName,
								phone:that.infoData.phone
							}
							getScrRefund(data).then((res) => {
								if(res.result_code=="FAIL"){
									uni.showToast({
										title: "退款失败",
										icon:'error',
									});
								}else if(res.result_code=="SUCCESS"){
									console.log('111111111',item)
									let jydata = {
										id:item.id,
										hdId:item.spId,
										hdName:item.payment_body,
										payment_phone:that.infoData.phone,
										payment_type:2
									}
									getScRrefundJl(jydata).then((jyRes) => {
										if(jyRes.code==200){
											uni.showToast({
												title: "退款成功",
												icon:'success',
											});
											setTimeout(() => {
												uni.reLaunch({
													url: '/pages/index/index'
												 });
											  }, 1000);
										}
									  })
								}
							})
						}else{
							console.log('用户点击取消');
						}
					}
				})
			},
		},
		//时间戳的处理
		        filters: {
		            formatDate: function(value) {
		                var date = new Date(value*1000);
						var Y = date.getFullYear() + '-';
						var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
						var D = date.getDate() + ' ';
						var h = date.getHours() + ':';
						var m = date.getMinutes() + ':';
						var s = date.getSeconds();
						return Y+M+D+h+m+s;
		            }
		
		        },
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.tabs {
	  display: flex;
	  padding: 10px 0;
	  border-bottom: 1px solid #6a8473;
	}
	.tabs view {
	  padding: 5px;
	  width: 30%;
	  text-align: center;
	  font-size: 28rpx;
	  font-weight: 300;
	}
	.active {
	  font-weight: bold;
	  color: #fff;
	  /* border-bottom: 1px solid #6a8473; */
	  background-color: #6a8473;
	}
	
	.tabItem{
		display: flex;
		height: 120rpx;
		padding: 10rpx 0;
		/* box-shadow: 1px 1px 10rpx #ddd; */
		margin-top: 20rpx;
		border: 1px solid #6a8473;
	}
	
	.orderName{
		font-size: 28rpx;
		font-weight: 300;
	}
	
	.tabItem image{
		width: 200rpx;
		height: 160rpx;
		margin-right:20rpx;
	}
	
	.OrderInfo{
		padding: 0 25rpx;
		line-height: 47rpx;
		font-size: 27rpx;
	}
	
	.orderPrice{
		margin-left: auto;
		padding: 24rpx 20rpx;
		line-height: 65rpx;
		font-size: 26rpx;
		text-align: center;
	}
	
	.exitBtn{
		font-size: 19rpx;
		color: #6a8473;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: -15rpx;
		margin-left: 15rpx;
	}
	.tkBtn{
		font-size: 19rpx;
		color: red;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: -15rpx;
		margin-left: 15rpx;
	}
	
	.orderTime{
		margin-top: 0rpx;
		font-weight: 300;
		font-size: 24rpx;
		color: #999;
	}
	
	.orderPrice{
		color: #6a8473;
		font-size: 26rpx;
		font-weight: 300;
	}
	
	.ddimg{
		width: 100%;
		height: 650rpx;
	}
	
	.box{
		padding: 0 20rpx;
	}
	
	.paymenPrice{
		margin-top: -25rpx;
	}
	
	.tk{
		border: 1px solid #6a8473;
		margin-left: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 24rpx;
		margin-top: -15rpx;
		border-radius: 5rpx;
	}
	
	.shopBox{
		display: flex;
	}
</style>